<template>
  <div class="vuln-detail-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>漏洞详情</span>
          <div>
            <el-button type="primary" @click="handleEdit" v-if="!isEditing">编辑</el-button>
            <el-button @click="handleBack">返回</el-button>
          </div>
        </div>
      </template>
      
      <div v-loading="loading">
        <div v-if="isEditing">
          <!-- 编辑表单 -->
          <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="CVE编号" prop="cve_id">
              <el-input v-model="form.cve_id"></el-input>
            </el-form-item>
            <el-form-item label="严重程度" prop="severity">
              <el-select v-model="form.severity">
                <el-option label="严重" value="critical"></el-option>
                <el-option label="高危" value="high"></el-option>
                <el-option label="中危" value="medium"></el-option>
                <el-option label="低危" value="low"></el-option>
                <el-option label="信息" value="info"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status">
                <el-option label="新发现" value="new"></el-option>
                <el-option label="已验证" value="verified"></el-option>
                <el-option label="处理中" value="in_progress"></el-option>
                <el-option label="已修复" value="fixed"></el-option>
                <el-option label="已关闭" value="closed"></el-option>
                <el-option label="误报" value="false_positive"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="漏洞描述" prop="description">
              <el-input v-model="form.description" type="textarea" rows="4"></el-input>
            </el-form-item>
            <el-form-item label="复现步骤" prop="reproduce_steps">
              <el-input v-model="form.reproduce_steps" type="textarea" rows="4"></el-input>
            </el-form-item>
            <el-form-item label="解决方案" prop="solution">
              <el-input v-model="form.solution" type="textarea" rows="4"></el-input>
            </el-form-item>
            <el-form-item label="参考链接" prop="references">
              <el-input v-model="form.references" type="textarea" rows="2"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
              <el-button @click="isEditing = false">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <!-- 详情展示 -->
          <el-descriptions :column="1" border>
            <el-descriptions-item label="标题">{{ vulnDetail.title }}</el-descriptions-item>
            <el-descriptions-item label="CVE编号">{{ vulnDetail.cve_id || '-' }}</el-descriptions-item>
            <el-descriptions-item label="严重程度">
              <el-tag :type="getSeverityType(vulnDetail.severity)" effect="dark">
                {{ getSeverityText(vulnDetail.severity) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(vulnDetail.status)">
                {{ getStatusText(vulnDetail.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="资产">
              <div v-if="vulnDetail.assets && vulnDetail.assets.length > 0">
                <el-tag 
                  v-for="asset in vulnDetail.assets" 
                  :key="asset.id" 
                  type="success" 
                  class="asset-tag"
                  @click="viewAssetDetail(asset.id)"
                >
                  {{ asset.name }} ({{ assetTypeText(asset.type) }})
                </el-tag>
              </div>
              <span v-else>未关联资产</span>
            </el-descriptions-item>
            <el-descriptions-item label="发现时间">{{ formatDate(vulnDetail.created_at) }}</el-descriptions-item>
            <el-descriptions-item label="漏洞描述">{{ vulnDetail.description }}</el-descriptions-item>
            <el-descriptions-item label="复现步骤">
              <pre>{{ vulnDetail.reproduce_steps || '-' }}</pre>
            </el-descriptions-item>
            <el-descriptions-item label="解决方案">
              <pre>{{ vulnDetail.solution || '-' }}</pre>
            </el-descriptions-item>
            <el-descriptions-item label="参考链接">
              <div v-if="vulnDetail.references">
                <a v-for="(ref, index) in vulnDetail.references.split('\n')" :key="index" :href="ref" target="_blank" class="reference-link">
                  {{ ref }}
                </a>
              </div>
              <span v-else>-</span>
            </el-descriptions-item>
          </el-descriptions>

          <!-- AI风险评估部分 -->
          <div class="risk-assessment-container">
            <el-divider content-position="left">
              <span class="divider-title">AI风险评估</span>
            </el-divider>
            
            <div v-if="aiRiskLoading" class="ai-loading">
              <el-skeleton :rows="3" animated />
              <div class="ai-loading-text">AI正在分析漏洞风险...</div>
            </div>
            
            <div v-else-if="aiRiskError" class="ai-error">
              <el-alert
                title="无法获取AI风险评估"
                type="error"
                :description="aiRiskError"
                show-icon
              />
              <el-button size="small" type="primary" @click="getRiskAssessment" class="retry-button">
                重试
              </el-button>
            </div>
            
            <div v-else-if="aiRiskAssessment" class="ai-result">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="risk-score-container">
                    <div class="risk-score" :class="getRiskScoreClass(aiRiskAssessment.contextual_score)">
                      {{ aiRiskAssessment.contextual_score }}
                    </div>
                    <div class="risk-level">
                      {{ getRiskLevelText(aiRiskAssessment.contextual_score) }}
                    </div>
                    <div class="risk-comparison" v-if="vulnDetail.severity">
                      <el-tooltip content="CVSS评分与AI环境感知评分的差异" placement="top">
                        <span>
                          <i class="el-icon-warning" v-if="hasRiskScoreDifference"></i>
                          原始严重程度: {{ getSeverityText(vulnDetail.severity) }}
                        </span>
                      </el-tooltip>
                    </div>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="risk-factors">
                    <h3>环境风险因素</h3>
                    <ul class="factor-list">
                      <li v-for="(factor, index) in aiRiskAssessment.risk_factors" :key="index">
                        <el-tooltip :content="factor.description" placement="top">
                          <div class="factor-item">
                            <el-tag :type="getFactorType(factor.impact)" size="small">
                              {{ factor.impact }}
                            </el-tag>
                            {{ factor.name }}
                          </div>
                        </el-tooltip>
                      </li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
              
              <div class="risk-analysis">
                <h3>风险分析</h3>
                <div v-html="formatRiskAnalysis(aiRiskAssessment.analysis)"></div>
              </div>
              
              <div class="risk-recommendations" v-if="aiRiskAssessment.recommendations.length > 0">
                <h3>缓解建议</h3>
                <el-collapse>
                  <el-collapse-item 
                    v-for="(rec, index) in aiRiskAssessment.recommendations" 
                    :key="index"
                    :title="rec.title"
                  >
                    <div v-html="formatRecommendation(rec.description)"></div>
                    <div class="recommendation-priority">
                      <strong>优先级:</strong> 
                      <el-tag :type="getPriorityType(rec.priority)" size="small">
                        {{ getPriorityText(rec.priority) }}
                      </el-tag>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
              
              <div class="risk-footer">
                <div class="ai-disclaimer">此风险评估基于AI分析和当前上下文环境，仅供参考</div>
                <div class="assessment-time">评估时间: {{ formatDate(aiRiskAssessment.timestamp) }}</div>
                <el-button size="small" type="primary" @click="getRiskAssessment">
                  刷新评估
                </el-button>
              </div>
            </div>
            
            <div v-else class="no-assessment">
              <el-empty description="暂无风险评估" :image-size="100">
                <template #description>
                  <p>还没有针对此漏洞的AI风险评估</p>
                </template>
                <el-button type="primary" @click="getRiskAssessment">
                  获取AI风险评估
                </el-button>
                
                <!-- 调试按钮 -->
                <el-button type="info" @click="debugAIRiskAssessment" style="margin-top:10px;">
                  调试AI接口
                </el-button>
              </el-empty>
            </div>
          </div>

          <!-- 添加漏洞分派组件 -->
          <AssignVulnerability :vulnerabilityId="vulnId" @assigned="refreshVulnDetail" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { reactive, ref, onMounted, toRefs, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getVulnerability, updateVulnerability, getVulnRiskAssessment, directFetchRiskAssessment } from '@/api/vulnerability'
import AssignVulnerability from './components/AssignVulnerability.vue'

export default {
  name: 'VulnerabilityDetail',
  components: {
    AssignVulnerability
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const formRef = ref(null)
    const loading = ref(false)
    const saving = ref(false)
    const vulnId = computed(() => route.params.id)
    const aiRiskLoading = ref(false)
    const aiRiskError = ref(null)
    const aiRiskAssessment = ref(null)
    
    // 检查用户是否已登录
    const checkLogin = () => {
      const token = store.getters.token
      const userInfo = store.getters.userInfo

      if (!token || !userInfo) {
        ElMessage.warning('您尚未登录或登录已过期，请重新登录')
        router.push(`/login?redirect=${encodeURIComponent(router.currentRoute.value.fullPath)}`)
        return false
      }
      return true
    }
    
    const state = reactive({
      isEditing: route.query.edit === 'true',
      vulnDetail: {},
      form: {
        title: '',
        cve_id: '',
        severity: 'medium',
        status: 'new',
        description: '',
        reproduce_steps: '',
        solution: '',
        references: ''
      }
    })

    // 表单验证规则
    const rules = {
      title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
      severity: [{ required: true, message: '请选择严重程度', trigger: 'change' }],
      status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      description: [{ required: true, message: '请输入漏洞描述', trigger: 'blur' }]
    }

    // 获取严重程度标签类型
    const getSeverityType = (severity) => {
      const typeMap = {
        critical: 'danger',
        high: 'danger',
        medium: 'warning',
        low: 'success',
        info: 'info'
      }
      return typeMap[severity] || 'info'
    }
    
    // 获取严重程度中文文本
    const getSeverityText = (severity) => {
      const textMap = {
        critical: '严重',
        high: '高危',
        medium: '中危',
        low: '低危',
        info: '信息'
      }
      return textMap[severity] || severity
    }

    // 获取状态标签类型
    const getStatusType = (status) => {
      const typeMap = {
        new: 'danger',
        verified: 'warning',
        in_progress: 'primary',
        fixed: 'success',
        closed: 'info',
        false_positive: ''
      }
      return typeMap[status] || ''
    }
    
    // 获取状态中文文本
    const getStatusText = (status) => {
      const textMap = {
        new: '新发现',
        verified: '已验证',
        in_progress: '处理中',
        fixed: '已修复',
        closed: '已关闭',
        false_positive: '误报'
      }
      return textMap[status] || status
    }

    // 资产类型文本
    const assetTypeText = (type) => {
      const textMap = {
        server: '服务器',
        webapp: 'Web应用',
        mobile: '移动应用',
        network: '网络设备',
        other: '其他'
      }
      return textMap[type] || type
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '-'
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    }

    // 获取漏洞详情
    const getVulnDetail = async () => {
      // 检查用户是否登录
      if (!checkLogin()) return
      
      loading.value = true
      try {
        const res = await getVulnerability(vulnId.value)
        if (res.code === 200) {
          state.vulnDetail = res.data
          // 初始化表单数据
          state.form = { ...res.data }
          // 获取AI风险评估
          await getRiskAssessment()
        } else {
          ElMessage.error(res.message || '获取漏洞详情失败')
        }
      } catch (error) {
        console.error(error)
        ElMessage.error('获取漏洞详情失败')
      } finally {
        loading.value = false
      }
    }

    // 刷新漏洞详情
    const refreshVulnDetail = () => {
      getVulnDetail()
    }

    // 查看资产详情
    const viewAssetDetail = (assetId) => {
      if (!checkLogin()) return
      router.push(`/assets/detail/${assetId}`)
    }

    // 编辑漏洞
    const handleEdit = () => {
      if (!checkLogin()) return
      state.isEditing = true
    }

    // 保存漏洞
    const handleSave = async () => {
      if (!checkLogin()) return
      if (!formRef.value) return
      
      await formRef.value.validate(async (valid) => {
        if (!valid) return
        
        saving.value = true
        try {
          // 确保字段名称与后端一致
          const formData = {
            title: state.form.title,
            cve_id: state.form.cve_id,
            severity: state.form.severity,
            status: state.form.status,
            type: state.form.type,
            description: state.form.description,
            reproduce_steps: state.form.reproduce_steps,
            solution: state.form.solution,
            references: state.form.references,
            cvss: state.form.cvss,
            // 确保assets是ID数组而不是对象数组
            assets: Array.isArray(state.form.assets) 
              ? state.form.assets.map(asset => typeof asset === 'object' ? asset.id : asset)
              : []
          }
          
          // 记录要提交的数据
          console.log("更新漏洞数据:", JSON.stringify(formData, null, 2))
          
          const response = await updateVulnerability(vulnId.value, formData)
          if (response.code === 200) {
            ElMessage.success('保存成功')
            state.isEditing = false
            getVulnDetail() // 刷新数据
          } else {
            ElMessage.error(response.message || '保存失败')
          }
        } catch (error) {
          console.error('保存漏洞失败', error)
          
          // 显示更详细的错误信息
          let errorMessage = '保存漏洞失败'
          if (error.response) {
            errorMessage += `: ${error.response.status} ${error.response.statusText}`
            console.error('错误响应详情:', error.response.data)
          } else if (error.request) {
            errorMessage += ': 服务器未响应'
          } else {
            errorMessage += `: ${error.message}`
          }
          
          ElMessage.error(errorMessage)
        } finally {
          saving.value = false
        }
      })
    }

    // 返回
    const handleBack = () => {
      router.back()
    }

    // 获取风险评估
    const getRiskAssessment = async () => {
      if (!checkLogin()) return
      if (!state.vulnDetail || !state.vulnDetail.id) return
      
      aiRiskLoading.value = true
      aiRiskError.value = null
      
      try {
        // 构建精简的请求数据，与测试脚本一致
        const data = {
          id: String(state.vulnDetail.id), // 确保ID为字符串类型
          title: state.vulnDetail.title || '测试标题',
          cve_id: state.vulnDetail.cve_id || '',
          original_severity: state.vulnDetail.severity || 'medium',
          description: state.vulnDetail.description || '测试描述',
          assets: [] // 简化资产数据，避免复杂结构
        }
        
        // 只有在有资产数据且结构正确时才添加
        if (state.vulnDetail.assets && Array.isArray(state.vulnDetail.assets) && state.vulnDetail.assets.length > 0) {
          // 只添加核心字段
          data.assets = state.vulnDetail.assets.map(asset => ({
            id: String(asset.id || ''), // 确保资产ID也为字符串
            name: asset.name || '',
            type: asset.type || '',
            importance: asset.importance || '一般'
          }))
        }
        
        // 记录请求数据
        console.log('[AI评估] 发送请求数据:', JSON.stringify(data, null, 2))
        console.log('[AI评估] ID类型:', typeof data.id)
        
        // 调用API
        const res = await getVulnRiskAssessment(data)
        console.log('[AI评估] 响应数据:', res)
        
        if (res.code === 200) {
          aiRiskAssessment.value = res.data
          console.log('[AI评估] 成功获取风险评估')
        } else {
          console.error('[AI评估] 返回非200状态:', res)
          throw new Error(res.message || '获取风险评估失败')
        }
      } catch (error) {
        console.error('[AI评估] 错误:', error)
        
        // 获取详细错误信息
        if (error.response) {
          console.error('[AI评估] 响应状态:', error.response.status)
          console.error('[AI评估] 响应数据:', error.response.data)
          aiRiskError.value = `获取风险评估失败 (${error.response.status}): ${error.message}`;
        } else if (error.request) {
          console.error('[AI评估] 请求已发出但未收到响应')
          aiRiskError.value = `请求超时或网络错误: ${error.message}`;
        } else {
          aiRiskError.value = `请求错误: ${error.message}`;
        }
      } finally {
        aiRiskLoading.value = false
      }
    }

    // 获取风险等级文本
    const getRiskLevelText = (score) => {
      if (score >= 9.0) return '严重风险'
      if (score >= 7.0) return '高风险'
      if (score >= 4.0) return '中等风险'
      if (score >= 0.1) return '低风险'
      return '无风险'
    }

    // 获取风险分数样式类
    const getRiskScoreClass = (score) => {
      if (score >= 9.0) return 'critical-risk'
      if (score >= 7.0) return 'high-risk'
      if (score >= 4.0) return 'medium-risk'
      if (score >= 0.1) return 'low-risk'
      return 'no-risk'
    }

    // 获取风险因素类型
    const getFactorType = (impact) => {
      const typeMap = {
        '高': 'danger',
        '中': 'warning',
        '低': 'info'
      }
      return typeMap[impact] || 'info'
    }

    // 获取建议优先级类型
    const getPriorityType = (priority) => {
      const typeMap = {
        '高': 'danger',
        '中': 'warning',
        '低': 'info'
      }
      return typeMap[priority] || 'info'
    }

    // 获取建议优先级文本
    const getPriorityText = (priority) => priority

    // 格式化风险分析文本
    const formatRiskAnalysis = (text) => {
      if (!text) return ''
      return text.replace(/\n/g, '<br>')
    }

    // 格式化建议文本
    const formatRecommendation = (text) => {
      if (!text) return ''
      return text.replace(/\n/g, '<br>')
    }

    // 检查风险分数差异
    const hasRiskScoreDifference = computed(() => {
      if (!aiRiskAssessment.value || !state.vulnDetail.severity) return false
      const originalScore = getSeverityScore(state.vulnDetail.severity)
      return Math.abs(originalScore - aiRiskAssessment.value.contextual_score) >= 2
    })

    // 获取原始严重程度对应的分数
    const getSeverityScore = (severity) => {
      const scoreMap = {
        critical: 10,
        high: 8,
        medium: 5,
        low: 3,
        info: 1
      }
      return scoreMap[severity] || 5
    }

    // 调试AI接口
    const debugAIRiskAssessment = async () => {
      // 构造最简化测试数据
      const testData = {
        id: "test-id",  // 明确使用字符串ID
        title: "测试漏洞",
        cve_id: "CVE-2023-1234",
        original_severity: "high",
        description: "这是一个测试漏洞描述",
        assets: []  // 不包含资产数据
      }
      
      aiRiskLoading.value = true
      aiRiskError.value = null
      
      try {
        // 使用fetch直接调用API
        console.log('[调试按钮] 开始测试, Token:', store.getters.token?.substring(0, 15) + '...')
        console.log('[调试按钮] 请求数据:', JSON.stringify(testData, null, 2))
        
        const response = await fetch('/api/v1/ai/risk-assessment', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${store.getters.token}`
          },
          body: JSON.stringify(testData)
        })
        
        // 获取响应文本
        const responseText = await response.text()
        console.log('[调试按钮] 响应状态:', response.status)
        console.log('[调试按钮] 响应文本:', responseText)
        
        // 尝试解析JSON
        try {
          const responseData = JSON.parse(responseText)
          console.log('[调试按钮] 已解析响应数据:', responseData)
          
          if (response.ok && responseData.code === 200) {
            aiRiskAssessment.value = responseData.data
            ElMessage.success('调试成功！')
          } else {
            throw new Error(`请求错误: ${response.status}, ${responseData.message || '未知错误'}`)
          }
        } catch (parseError) {
          throw new Error(`无法解析响应: ${responseText}`)
        }
      } catch (error) {
        console.error('[调试按钮] 错误:', error)
        aiRiskError.value = `调试错误: ${error.message}`
        ElMessage.error('调试失败：' + error.message)
      } finally {
        aiRiskLoading.value = false
      }
    }

    onMounted(() => {
      // 组件挂载时检查登录状态
      checkLogin()
      getVulnDetail()
    })

    return {
      ...toRefs(state),
      vulnId,
      formRef,
      loading,
      saving,
      rules,
      aiRiskLoading,
      aiRiskError,
      aiRiskAssessment,
      getSeverityType,
      getSeverityText,
      getStatusType,
      getStatusText,
      assetTypeText,
      formatDate,
      refreshVulnDetail,
      viewAssetDetail,
      handleEdit,
      handleSave,
      handleBack,
      getRiskAssessment,
      getRiskLevelText,
      getRiskScoreClass,
      getFactorType,
      getPriorityType,
      getPriorityText,
      formatRiskAnalysis,
      formatRecommendation,
      hasRiskScoreDifference,
      debugAIRiskAssessment
    }
  }
}
</script>

<style scoped>
.vuln-detail-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 18px;
  font-weight: bold;
}

.asset-tag {
  margin-right: 8px;
  margin-bottom: 5px;
  cursor: pointer;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 4px;
  margin: 0;
}

.reference-link {
  display: block;
  margin-bottom: 5px;
  color: #409EFF;
  text-decoration: none;
}

.reference-link:hover {
  text-decoration: underline;
}

/* AI风险评估样式 */
.risk-assessment-container {
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.divider-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.ai-loading {
  padding: 20px;
  text-align: center;
}

.ai-loading-text {
  margin-top: 10px;
  color: #909399;
}

.ai-error {
  padding: 20px;
}

.retry-button {
  margin-top: 10px;
}

.ai-result {
  padding: 20px 0;
}

.risk-score-container {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.risk-score {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  line-height: 120px;
  margin: 0 auto 15px;
  color: #fff;
}

.risk-score.critical-risk {
  background-color: #f56c6c;
}

.risk-score.high-risk {
  background-color: #e6a23c;
}

.risk-score.medium-risk {
  background-color: #409eff;
}

.risk-score.low-risk {
  background-color: #67c23a;
}

.risk-score.no-risk {
  background-color: #909399;
}

.risk-level {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.risk-comparison {
  font-size: 14px;
  color: #909399;
}

.risk-comparison i {
  color: #e6a23c;
  margin-right: 5px;
}

.risk-factors {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.risk-factors h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.factor-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.factor-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.factor-item .el-tag {
  margin-right: 10px;
}

.risk-analysis {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.risk-analysis h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.risk-recommendations {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.risk-recommendations h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.recommendation-priority {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.recommendation-priority strong {
  margin-right: 10px;
}

.risk-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.ai-disclaimer {
  font-style: italic;
}

.no-assessment {
  padding: 40px 0;
  text-align: center;
}
</style> 